import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, DatePicker } from 'antd'
import _ from 'loadsh'
import { Cell } from '@components/ApprovePre/Approve'
import ClaimFeeBlock from './components/ClaimFeeBlock'

const { Item } = Form

export default class StepTwoInput extends Component {
  state = {
    keyTitleMap: {},
    fileList: []
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  render () {
    const { preKey, instance } = this.props
    const { keyTitleMap } = this.state
    const { currentStep } = instance
    const claim = currentStep.claim
    return (
      <div>
        <ClaimFeeBlock formRef={this.props.formRef} name={`${preKey}_claimwithfee`} label={keyTitleMap[`${preKey}_claimwithfee`]} claim={claim} originClaim={this.props.claim}>
          <Cell>
            <Item labelCol={{ flex: '120px' }} name={`${preKey}_accept_datetime`} label={keyTitleMap[`${preKey}_accept_datetime`]} rules={[{ required: true, message: `${keyTitleMap[`${preKey}_accept_datetime`]}不能为空` }]}>
              <DatePicker placeholder={`请选择${keyTitleMap[`${preKey}_accept_datetime`]}`} style={{ width: '100%' }} />
            </Item>
          </Cell>
        </ClaimFeeBlock>
      </div>
    )
  }
}

StepTwoInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object,
  dictionaries: PropTypes.object,
  claimMap: PropTypes.object,
  preKey: PropTypes.string,
  isChange: PropTypes.bool,
  claim: PropTypes.object
}

StepTwoInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {},
  dictionaries: {},
  claimMap: {},
  preKey: '',
  isChange: true,
  claim: undefined
}
